<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="logo-container">
        <img src="../assets/logo.png" alt="Laboratory Logo" class="logo">
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical"
        :router="true"
      >
        <el-menu-item index="/user/dashboard">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/user/apply">
          <el-icon><Document /></el-icon>
          <span>实验申用</span>
        </el-menu-item>
        <el-menu-item index="/user/borrowed">
          <el-icon><List /></el-icon>
          <span>已借器材</span>
        </el-menu-item>
        <el-menu-item index="/user/returned">
          <el-icon><Check /></el-icon>
          <span>已还器材</span>
        </el-menu-item>
        <el-menu-item index="/user/person">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container class="main-container">
      <el-header>
        <div class="header-content">
          <span>当前时间：{{ currentTime }}</span>
          <div class="user-info">
            <el-avatar :size="32" :src="adminAvatar" />
            <span>admin</span>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { House, Files, Document, List, Check, User } from '@element-plus/icons-vue'

const currentTime = ref('')
let timer = null

const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}`
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 60000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

const adminAvatar = ref('../src/assets/my.jpg')
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#app {
  height: 100%;
  width: 100%;
}
</style>

<style scoped>
.layout-container {
  height: 100vh;
  width: 80vw;
  display: flex;
  overflow: hidden;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.logo-container {
  padding: 20px;
  text-align: center;
}

.logo {
  width: 80px;
  height: 80px;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-aside {
  background-color: #fff;
  border-right: 1px solid #dcdfe6;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-menu-vertical {
  border-right: none;
}

.el-main {
  padding: 0;
  height: calc(100vh - 60px);
  overflow-y: auto;
  background-color: #f5f7fa;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

